import React, { useEffect,useState } from 'react';
import { Form,
  Input, 
  Select,
  Drawer,
  Button,
  PageHeader,
  Divider,
  Row,
  Col,
  Checkbox,
  Tag,
  Table,
  Space,
  message,
 } from 'antd';
 import RenameForm from './RenameForm';
 import SelectRoomZoneModel from '@/components/SelectRoomZoneModel';
 import {getDictCode,getDictCodeLabel} from '@/utils/DataDictUtils';
 import { EditOutlined } from '@ant-design/icons';
 import moment from 'moment';
 import '../index.less';

 const FormItem = Form.Item;
const {TextArea} =  Input;
const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';

 const EditForm = props => {
    /*这些参数由index.jsx传过来的 */
    const { dispatch,visible, current, onCancel, onSubmit,onDelete,onStatus } = props;
    const [regionData, setRegionData] = useState(null);
    const [renameVisible, setRenameVisible] = useState(false);
    const [friendlyName, setFriendlyName] = useState(null);
    const [selectRegionModelVisible, setSelectRegionModelVisible] = useState(false);
    const [deviceFuncData, setDeviceFuncData] = useState([]);

    useEffect(()=>{
      
      if(current && visible){
        setRegionData(current.region);
        setFriendlyName(current.friendlyName);
        dispatch({
          type: 'deviceModel/listFunc',
          payload:{
            classId:current.classId
          },
          callback: res => {
            setDeviceFuncData(res);
          },
        });
      }

    },[visible]);

    const onSave=()=>{
      onSubmit(current.deviceId,regionData);
    }

    const onUpgrade=()=>{
      if(current && dispatch && current.newVersion){
        dispatch({
          type: 'deviceModel/upgrade',
          did: current.deviceId,
          resData:{
            newVersion:current.newVersion
          },
        });
      }else{
        message.info('已经是最新版本〜');
      }
    }

    const handleRenameClick=()=>{
      setRenameVisible(true);
    }

    const handleRenameSubmit=(values)=>{
      if(current && dispatch){
        dispatch({
          type: 'deviceModel/rename',
          did: current.deviceId,
          payload:values,
        });
        setFriendlyName(values.friendlyName);
        setRenameVisible(false);
      }
    }

    const handleRenameClose=()=>{
      setRenameVisible(false);
    }

    /*区域管理 */
    const addRegionClick=()=>{
      setSelectRegionModelVisible(true);
    }
  
    const handleSelectRegionModelCancel=()=>{
      setSelectRegionModelVisible(false);
    }
    
    const handleSelectRegionModelOk=(selectRegion,selectBed)=>{
     
      setSelectRegionModelVisible(false);
      let bedroom = {
        ...regionData,
        regionCode:selectRegion.regionCode,
        regionName:selectRegion.regionName,
        zoneCode:selectBed.zoneCode,
        zoneName:selectBed.zoneName,
      }
      setRegionData(bedroom);
    
    }
 
    const deviceFuncOptions = deviceFuncData.map(d => (
      <Option key={d.id}>{d.funcName}</Option>
    ));

    return (
        <>
        <Drawer
          title='编辑设备'
          width={820}
          onClose={onCancel}
          visible={visible}
          bodyStyle={{ paddingBottom: 80 }}
          footer={
            <div
              style={{
                textAlign: 'right',
              }}
            >
              <Button onClick={onCancel} style={{ marginRight: 8 }}>
                取消
              </Button>
              <Button type='primary' onClick={onSave} style={{ marginRight: 8 }}>
                保存
              </Button>
              <Button onClick={onUpgrade} style={{ marginRight: 8 }}>
                设备升级
              </Button>
              <Button onClick={()=>{onStatus(current)}} style={{ marginRight: 8 }}>
                {current && current.status && current.status===1?'设备转闲置':'恢复使用'}
              </Button>
              <Button onClick={()=>{onDelete(current)}} style={{ marginRight: 8 }}>
                设备删除
              </Button>
            </div>
          }
        >
          <div className='page-header-title'>设备基础信息:</div>
          <Form>
            <Row>
              <Col span={8}>
                <FormItem label='设备名称'  >
                    {current && friendlyName? friendlyName:''}<Button style={{marginLeft:'5px'}} type='primary' size='small' icon={<EditOutlined />}  onClick={handleRenameClick}></Button>
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备类别'  >
                    {current && current.className}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备型号'  >
                    {current && current.model ? current.model.modelName:''}
                </FormItem>
              </Col>
          </Row>
          <Row>
              <Col span={8}>
                <FormItem label='设备属性'  >
                    {current && current.model ?current.model.attributes:''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备ID'  >
                    {current && current.deviceId}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='设备订单号'  >
                </FormItem>
              </Col>
          </Row>
          <Row>
              <Col span={8}>
                <FormItem label='设备版本'  >
                    {current && current.version}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='添加时间'  >
                    {current && current.region ? moment(current.region.createTime).format(dateFormat):''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='保修时间'  >
                    {current && current.region? Math.ceil((moment().valueOf() - current.region.createTime)/1000/60/60/24):0}天
                </FormItem>
              </Col>
          </Row>
          <Row>
              <Col span={8}>
                <FormItem label='设备状态'  >
                    {current && current.status?getDictCodeLabel('deviceStatus',current.status):''}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label='在线状态'  >
                    {current && current.state?getDictCodeLabel('deviceState',current.state):''}
                </FormItem>
              </Col>
          </Row>
          <div className='page-header-title'>设备所在区域:</div>
          <Row>
            <Col>
              <FormItem >
                { regionData ? <Tag style={{marginTop:'5px'}} >
                          {regionData.regionName+'-'+regionData.zoneName}
                        </Tag>:''}
                      <Button type='default'  size='small' onClick={addRegionClick}>变更区域</Button>
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col>
              <FormItem label='功能划分'  >
                  <Select
                      allowClear
                      placeholder='请选择功能'
                      style={{ width: 150 }}
                      value={regionData && regionData.deviceFunc ?regionData.deviceFunc.toString():null}
                      onChange={(value)=>{
                        setRegionData({
                          ...regionData,
                          deviceFunc: value,
                        });
                      }}
                    >
                      {deviceFuncOptions}
                    </Select>
              </FormItem>
            </Col>
          </Row>
          <Row>
          <Col span={24}>
            <Form.Item label='区域描述' >
                <TextArea
                  rows={4}
                  placeholder='请输入区域描述'
                  onChange={(e)=>{
                    setRegionData({
                      ...regionData,
                      regionDesc: e.target.value,
                    });
                  }}
                  value={regionData?regionData.regionDesc:null}
                />
            </Form.Item>
            </Col>
          </Row>
          </Form>
         
        </Drawer>
        <RenameForm 
          current={current}
          visible={renameVisible}
          onSubmit={handleRenameSubmit}
          onClose={handleRenameClose}
        />
        <SelectRoomZoneModel 
          dispatch={dispatch}
          visible={selectRegionModelVisible}
          current={current}
          handleCancel={handleSelectRegionModelCancel}
          handleSelect={handleSelectRegionModelOk}
        />
        </>
    );
 }

 export default EditForm;